<template>
  <div class="rightbody">
    <div class="tabheader2">
      <ul>
        <li :class="{'active':nav_top_btn == 0}" @click="checkNva(0)">音乐库</li>
        <li :class="{'active':nav_top_btn == 1}" @click="checkNva(1)">我的音乐</li>
      </ul>
    </div>
    <audio id="audioClass" loop="loop" v-if="rightTabIndex==5"></audio>

    <audio id="audioClass1" loop="loop" v-if="rightTabIndex==5"></audio>
    <div class="currentmusic clearfix">
      <label>当前音乐</label>
      <div class="musicname clearfix">
        <i :class="{'active':isplay1}" @click="currentMusicPlayOrPause" v-show="sceneInfo.music.length"></i>
        <p style="margin-left: 10px;" v-if="sceneInfo.music.length==0">暂无音乐</p>
        <p v-else>{{ sceneInfo.musicname}}</p>
        <a v-show="sceneInfo.music.length" @click="deleteCurrentMusic"></a>
      </div>
    </div>
    <div class="musictab1" v-show="nav_top_btn == 0">
      <div class="musictype">
        <ul>
          <li v-for="(item,index) in categorylist" :class="{'active':currentCategory == index}"
              @click="categoryClick(index)">
            <a>{{item.name}}</a>
          </li>
        </ul>
      </div>
      <div class="musicitem" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="0">
        <ul v-show="currentCategoryList.length != 0">
          <li v-for="(item,index) in currentCategoryList" @click.self="musicItemClick(index,0)">
            <a :class="{'active':isplay && currentMusicIndex == index}" @click.self="palyOrPauseClick(index,0)"></a>
            <span @click.self="musicItemClick(index,0)">{{ item.filename }}</span>

          </li>
        </ul>
        <div v-show="currentCategoryList.length==0" class="nomusic"></div>
      </div>
      <div class="musicupload pa"  @mouseover="showMyMusic(this)">

        <Upload
          accept="audio/mpeg"
          :max-size="1024*3"
          ref="upload"
          :with-credentials="true"
          multiple
          :action="uploadUrl" :on-success="uploadsuccess" :on-error="uploaderror" :on-exceeded-size="uploadexceeded">
          <a>上传音乐</a>
        </Upload>
      </div>
    </div>
    <div class="musictab2" v-show="nav_top_btn == 1">
      <div class="musicitem" v-infinite-scroll="loadMyDataMore" infinite-scroll-disabled="MyBusy"
           infinite-scroll-distance="0">
        <ul>
          <li v-for="(item,index) in myMusicList" @click.self="musicItemClick(index,1)">

            <a :class="{'active':isplay && myCurrentMusicIndex == index}" @click.self="palyOrPauseClick(index,1)"></a>
            <span @click.self="musicItemClick(index,1)">{{ item.filename }}</span>
            <em class="delmusic" @click.self="delMyMusic(index)"></em>
          </li>
        </ul>
        <div class="nomusic" v-show="myMusicList.length==0"></div>
      </div>
      <div class="musicupload pa">

        <Upload
          accept="audio/mpeg"
          :max-size="1024*3"
          ref="upload"
          :with-credentials="true"
          multiple
          :action="uploadUrl" :on-success="uploadsuccess" :on-error="uploaderror" :on-exceeded-size="uploadexceeded">
          <a>上传音乐</a>
        </Upload>
      </div>
    </div>
    <Modal
      v-model="showModal"
      title="提示"
      @on-ok="DelIndex"
      width="300">
      <p>是否删除？</p>
    </Modal>
  </div>
</template>


<script>
  import {mapActions, mapGetters} from 'vuex'
  import api from '../api/index.js'
  export default {
    name: "musicfunc",
    computed: {
      ...mapGetters([
        "sceneInfo",
        "rightTabIndex"

      ]),

    },
    data() {
      return {

        baseUrl: "http://res.yaoyue365.com/",
        uploadUrl: "",
        nav_top_btn: 0,
        isplay: true,
        isplay1: false,
        categorylist: [],
        currentCategory: -1,
        currentMusicIndex: -1,
        currentCategoryList: [],

        page: 1, //当前页
        num: 10, // 一页显示多少条
        busy: false,
        musicSrc: "",
        musicSrc1: "",

        myMusicList: [],
        Mypage: 1,
        Mynum: 20,
        MyBusy: false,
        showModal: false,
        delIndex: -1,
        myIsplay: true,
        myCurrentMusicIndex: -1

      }
    },
    created() {
      this.uploadUrl = api.uploadPicType(3);
      this.initCategoryData()
    },
    methods: {
      uploadsuccess(response){
        // debugger
        this.myMusicList.unshift(response.file)
        this.$refs.upload.fileList = [];

      },
      uploaderror(error){
        this.$Message.error('上传音乐失败');
      },
      uploadexceeded(){
        this.$Message.error('文件大小超出限制!最大3M!');
      },
      loadMore() {
        this.busy = true;
        let newPage = this.page;
        // console.log(newPage + "----" + this.num)
        this.loadSysData(this.currentCategory, newPage, this.num);
        this.busy = false;
      },
      loadMyDataMore(){
        this.MyBusy = true;
        let newPage = this.Mypage;
        // console.log(newPage + "----" + this.num)
        this.getMyMusicData(newPage, this.Mynum);

        // this.MyBusy = false;
        this.MyBusy = false;

      },
      checkNva(index) {
        switch (index) {
          case 0:
            this.nav_top_btn = 0
            break;
          case 1:
            this.nav_top_btn = 1
            break;
        }
      },
      initCategoryData() {
        this.$http.get(api.getCategorylist(4)).then(res => {
          // console.log(res.data.lists)

          this.categorylist = res.data.lists;
          // debugger
          this.categoryClick(0);
        }).catch((error) => { // 错误处理
          // console.log(error)
          // window.alert('获取分类信息出错！')
        })
      },
      currentMusicPlayOrPause(){
        // console.log('currentMusicPlayOrPause')
        var audio = document.getElementById("audioClass");
        var audio1 = document.getElementById("audioClass1");
        audio1.pause();
        this.currentMusicIndex = -1;
        //
        // this.isplay = !this.isplay;
        // debugger
        if (audio.paused) {

          // audio.src = this.baseUrl + this.sceneInfo.music;
          // this.musicSrc = this.baseUrl + this.sceneInfo.music;
          audio.src = this.sceneInfo.music;
          // console.log(this.musicSrc)
          // console.log(audio.src)
          audio.play();
          // console.log('play')
          this.isplay1 = true;

        } else {

          this.isplay1 = false;
          // console.log('pause')
          // console.log(audio.src )
          audio.pause()
        }

      },
      musicItemClick(index, type) {
        var audio = document.getElementById("audioClass");
        var audio1 = document.getElementById("audioClass1");
        audio1.pause();
        if (type == 0) {
          this.currentMusicIndex = -1;
          var obj = this.currentCategoryList[index];
          audio.src = obj['src'];
          audio.play()
          this.isplay1 = true;
          var params = {};
          params.keys = ["music", "musicname"];
          params.values = [obj['src'], obj['filename']];

          this.$store.dispatch('changeSceneInfo', params);
        } else {
          this.myCurrentMusicIndex = -1;
          var obj = this.myMusicList[index];

          audio.src = obj['src'];
          audio.play()
          this.isplay1 = true;

          var params = {};
          params.keys = ["music", "musicname"];
          params.values = [obj['src'], obj['filename']];

          this.$store.dispatch('changeSceneInfo', params);

        }


      },
      //删除当前音乐
      deleteCurrentMusic(){
        var audio = document.getElementById("audioClass");
        audio.pause();
        var params = {};
        params.keys = ["music"];
        params.values = [""];
        this.$store.dispatch('changeSceneInfo', params)
      },
      palyOrPauseClick(index, type) {

        // debugger
        var audio = document.getElementById("audioClass1");

        var audio1 = document.getElementById("audioClass");
        audio1.pause();
        this.isplay1 = false;
        // debugger

        if (type == 0) {

          if (this.currentMusicIndex == index) {

            if (audio.paused) {

              audio.play();

              this.isplay = true;

            } else {

              this.isplay = false;

              audio.pause()
            }

          } else {

            this.currentMusicIndex = index;

            var obj = this.currentCategoryList[index];
            audio.src = obj.src;

            audio.play();

            this.isplay = true;

          }
        } else {


          if (this.myCurrentMusicIndex == index) {

            if (audio.paused) {

              audio.play();

              this.isplay = true;

            } else {

              this.isplay = false;

              audio.pause()
            }

          } else {

            this.myCurrentMusicIndex = index;

            var obj = this.myMusicList[index];
            audio.src = obj.src;

            audio.play();

            this.isplay = true;

          }


        }


      },
      delMyMusic(index) {
        this.showModal = true;
        this.delIndex = index;

      },
      DelIndex(){
        var tip = this.$Message.loading({
          content: '删除中...',
          duration: 0
        });
        var url = api.delFile(this.myMusicList[this.delIndex].id);
        this.$http.get(url).then(res => {
          setTimeout(tip, 1);
          if (res.data.code == 200) {
            if (res.data.status) {
              this.myMusicList.splice(this.delIndex, 1);
            } else {
              this.$Message.error(res.data.msg);
            }
          } else {
            this.$Message.error('网络开小差啦~');
          }
        }).catch(error => {
          setTimeout(tip, 1);
          this.$Message.error('网络开小差啦~');
        })
      },
      categoryClick(index) {
        if (this.currentCategory == index) {
          return;
        }

        var audio1 = document.getElementById("audioClass1");
        audio1.pause();

        this.currentMusicIndex = -1;

        this.currentCategoryList = "";
        if (index != 0) {
          this.page = 1;
        }
        this.currentCategory = index;
        this.loadSysData(index, 1, 25);

      },
      loadSysData(index, page, pageSize) {
        // return;
        var cObj = this.categorylist[index];
        if (cObj === undefined) {
          return;
        }
        var biztype = cObj['id'];
        // this.busy = true;
        //2 图片 1 背景 3音乐 4 svg
        this.$http.get(api.getSysfile(3, biztype, page, pageSize)).then(res => {

          // console.log(res.data.lists)
          // debugger
          if (this.currentCategoryList.length == 0) {
            this.currentCategoryList = res.data.lists;
            this.page++;
            // this.busy = false;
          } else {
            if (res.data.lists.length == 0) {
              // this.busy = false;
            } else {
              for (var i = 0; i < res.data.lists.length; i++) {
                var bean = res.data.lists[i];
                this.currentCategoryList.push(bean);
              }
              // this.busy = false;
              this.page++;

            }
          }
        }).catch(error => { // 错误处理
          this.busy = false;
//          console.log(error)
        })
      },
      getMyMusicData(page, pageSize){
        // this.MyBusy = true;
        this.$http.get(api.getMyPic(3, page, pageSize)).then(res => {

          if (this.myMusicList.length == 0) {

            this.myMusicList = res.data.lists;

            this.Mypage++;
            // this.MyBusy = false;
          } else {

            if (res.data.lists.length == 0) {

              // this.MyBusy = false;

            } else {
              for (var i = 0; i < res.data.lists.length; i++) {
                var bean = res.data.lists[i];
                this.myMusicList.push(bean);
              }
              this.Mypage++;
              // this.MyBusy = false;
            }
          }

        }).catch(error => {
          // console.log(error)
          // this.MyBusy = false;
          this.$Message.error('网络开小差啦~');
        })

      },
      showMyMusic(){
        this.nav_top_btn = 1;
      }
    },

    watch: {

      rightTabIndex: {

        // deep:true,
        handler: function (newRightTabIndex) {

          // debugger
          this.currentMusicIndex = -1;
        }

      }


    },

  }
</script>


<style>
  .musictab1, .musictab2 {
    width: 280px;
    margin: 0 auto
  }

  .currentmusic label {
    float: left;
    font-size: 14px;
    color: #999;
    height: 30px;
    line-height: 30px;
    width: 65px;
    text-align: center;
  }

  .currentmusic {
    width: 280px;
    margin: 0 auto;
    padding: 15px 0;
    border-bottom: 1px solid #e3e7e6;
  }

  .musicname {
    float: left;
    width: 200px;
    height: 30px;
    line-height: 30px;
    background: #eef1f2;
  }

  .musicname i {
    float: left;
    width: 30px;
    height: 30px;
    background: url(../assets/images/playbtn.png) no-repeat center
  }

  .musicname i.active {
    float: left;
    width: 30px;
    height: 30px;
    background: url(../assets/images/pausebtn.png) no-repeat center
  }

  .musicname p {
    float: left;
    width: 140px;
    font-size: 14px;
    color: #1abd9b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .musicname a {
    float: right;
    width: 10px;
    height: 10px;
    background: url(../assets/images/closebtn.png) no-repeat center #eef1f2;
    margin: 10px;
  }

  .musictype {
    border-bottom: 1px solid #e3e7e6;
    position: fixed;
    top: 160px;
    width: 290px;
    height: 80px;
    right: 65px;
    overflow-y: auto;
  }

  .musictype ul {
    overflow: hidden
  }

  .musictype li {
    float: left;
  }

  .musictype li a {
    display: block;
    height: 24px;
    line-height: 24px;
    text-align: center;
    font-size: 14px;
    padding: 0 10px;
    margin: 5px;
    color: #808386;
  }

  .musictype li.active a {
    background: #1abd9b;
    color: #fff;
    border-radius: 12px;
  }

  .musictab1 .musicitem {
    position: fixed;
    width: 280px;
    top: 260px;
    bottom: 80px;
    overflow-y: auto;
  }

  .musictab2 .musicitem {
    position: fixed;
    width: 280px;
    top: 170px;
    bottom: 80px;
    overflow-y: auto;
  }

  .musicitem li {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    overflow: hidden;
  }

  .musicitem li a {
    float: left;
    width: 14px;
    height: 14px;
    background: url(../assets/images/playmusic.png) no-repeat center;
    margin: 13px;
  }

  .musicitem li a.active {
    background: url(../assets/images/pausemusic.png) no-repeat center;
  }

  .musicitem li:nth-child(odd) {
    background: #f4f6f6;
  }

  .musicitem li:nth-child(even) {
    background: #fff;
  }

  .musicitem li span {
    float: left;
    width: 200px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .musicitem li:hover .delmusic {
    float: right;
    width: 10px;
    height: 10px;
    margin: 15px;
    background: url(../assets/images/closebtn.png) no-repeat center;
  }

  .musicupload {
    bottom: 20px;
    left: 20px;
  }

  .musicupload a {
    display: block;
    width: 260px;
    height: 40px;
    line-height: 40px;
    background: url(../assets/images/upload.png) no-repeat 80px center #1abd9b;
    text-indent: 110px;
    color: #fff;
    border-radius: 4px;
    font-size: 15px;
  }

  .nomusic {
    width: 100%;
    height: 100%;
    background: url(../assets/images/nomusic.png) no-repeat center 80px;
  }

</style>
